"use client";
import { BannerRep, PrizeTypes } from "@/api/home";
import { Card } from "@/components/Card";
import NoticeBox from "@/components/NoticeBox";
import { Tabs } from "antd-mobile";
import clsx from "clsx";
import React, { FC } from "react";
import "swiper/css";
import { Autoplay } from "swiper/modules";
import { Swiper, SwiperSlide } from "swiper/react";
import styles from "./prize.module.scss";

interface Props {
    data: PrizeTypes[];
    notices?: BannerRep[];
    type: "list" | "card" | "notice";
}

const HomePrize: FC<Props> = (props) => {
    const { data, type, notices } = props;
    const noticeSwiperRef = React.useRef<any>(null);
    const [act, setAct] = React.useState<number>(0);

    const renderData = React.useMemo(() => {
        if (type !== "notice") return data;
        const result: any = [];
        if (!!data?.length) {
            let bigWin: string[] = [];
            data.forEach((item) => {
                bigWin.push(
                    `${item.phone ? item.phone.slice(0, 1) + "*****" + item.phone.slice(-3) : ""} acabou de retirar ${item.amount} R$`
                );
            });
            result.push({
                dataType: "bigWin",
                data: bigWin.join("&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"),
            });
        }
        if (!!notices?.length) {
            notices?.forEach((item) => {
                result.push({
                    dataType: "notice",
                    data: item.content,
                });
            });
        }

        return result;
    }, [data, notices, type]);
    const noticeEnd = (idx: number) => {
        if (noticeSwiperRef.current) {
            const toIndex = idx + 1 >= renderData.length ? 0 : idx + 1;
            setAct(toIndex);
            noticeSwiperRef.current?.slideToLoop(toIndex);
        }
    };

    if (!renderData?.length) return null;

    if (type === "notice") {
        return (
            <div
                className={
                    "flex items-center overflow-hidden bg-[var(--main-background)] px-[.1rem] py-[.04rem]"
                }
            >
                <div
                    className={
                        "iconfont icon-yangshengqi mr-[0.06rem] text-[.14rem] text-[var(--textColor6)]"
                    }
                ></div>
                {/* <NoticeBox content={renderData[0].data}></NoticeBox> */}
                <Swiper
                    direction="vertical"
                    loop
                    slidesPerView={1}
                    className="homeNoticeSwiper"
                    onSwiper={(swiper) => {
                        noticeSwiperRef.current = swiper;
                    }}
                    style={{ height: "24px" }}
                >
                    {renderData.map((item: any, index: number) => (
                        <SwiperSlide key={index}>
                            <NoticeBox
                                content={item.data}
                                start={index === act}
                                onEnd={() => noticeEnd(index)}
                            ></NoticeBox>
                        </SwiperSlide>
                    ))}
                </Swiper>
            </div>
        );
    }

    return (
        <div className={"my-[0.0694rem] px-[.1rem] pb-[.0rem]"}>
            {/* <div className={"mb-[0.0347rem]"}>{t("prize")}</div> */}
            {type === "card" && (
                <>
                    <div className="mb-[.1rem] text-[0.13rem] font-bold">
                        Grandes Vitórias Recentes
                    </div>
                    <Swiper
                        slidesPerView={5.2}
                        spaceBetween={10}
                        pagination={{
                            clickable: true,
                        }}
                        // freeMode={true}
                        loop
                        autoplay={{
                            delay: 3000,
                        }}
                        modules={[
                            Autoplay,
                            //  FreeMode
                        ]}
                        className="mySwiper"
                        // style={{
                        //     transitionTimingFunction: "linear !important",
                        //     transitionDuration: "3000ms",
                        // }}
                    >
                        {data.map((prize, index: number) => (
                            <SwiperSlide key={index}>
                                <div className={"w-[100%]"} style={{ borderRadius: ".1rem" }}>
                                    <Card
                                        item={prize}
                                        className="aspect-[169/234] h-[auto_!important]"
                                    />
                                    <div className={"pb-[0.0347rem] text-[0.12rem]"}>
                                        <p className={"mt-[.05rem] text-[#b77fff]"}>
                                            {prize.phone
                                                ? prize.phone.slice(0, 3) +
                                                  "*****" +
                                                  prize.phone.slice(-3)
                                                : ""}
                                        </p>
                                        <p className={"text-[0.11rem] text-[#43c937]"}>
                                            R${prize.amount}
                                        </p>
                                    </div>
                                </div>
                            </SwiperSlide>
                        ))}
                    </Swiper>
                </>
            )}

            {type === "list" && (
                <div className={styles.Prize}>
                    <div className="items flex flex-row items-center justify-between">
                        <Tabs>
                            <Tabs.Tab title="Recente" key="recente"></Tabs.Tab>
                            {/* <Tabs.Tab title="Vitórias" key="Vitórias"></Tabs.Tab> */}
                        </Tabs>
                        {/* <div>
                        <div className={styles.desc}>Jogando Agora</div>
                        <div className="pl-[.1rem]">52603</div>
                    </div> */}
                    </div>
                    <div className="relative mt-[.15rem] rounded-[.1rem] bg-[#1f2830] px-[.15rem]">
                        <div className={styles.item}>
                            <div>Jogos</div>
                            <div>Jogador</div>
                            {/* <div>Aposta</div> */}
                            <div>Pagamento</div>
                        </div>
                        <Swiper
                            slidesPerView={10}
                            direction="vertical"
                            loop
                            autoplay={{
                                delay: 1000,
                            }}
                            allowTouchMove={false}
                            modules={[Autoplay]}
                            height={500}
                            style={{ height: "500px" }}
                        >
                            {[...(data || []), ...(data || [])].map((prize, index: number) => (
                                <SwiperSlide key={index}>
                                    <div
                                        className={clsx(styles.item, styles.normal, {
                                            [styles.even]: index % 2 === 1,
                                        })}
                                    >
                                        <div>
                                            <span>{prize.game_name}</span>
                                        </div>
                                        <div>
                                            {prize.phone
                                                ? prize.phone.slice(0, 3) +
                                                  "*****" +
                                                  prize.phone.slice(-3)
                                                : ""}
                                        </div>
                                        {/* <div>Aposta</div> */}
                                        <div>R${prize.amount}</div>
                                    </div>
                                </SwiperSlide>
                            ))}
                        </Swiper>
                        <div className="absolute bottom-[0] left-[0] right-[0] top-[0] z-[2]"></div>
                    </div>
                </div>
            )}
        </div>
    );
};

export default HomePrize;